<template>
  <div class="view-wrapper">
    <div class="head">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="店铺名称：">
          <el-input
            placeholder="请输入店铺名称"
            v-model="formInline.shopName"
            class="input-with-select"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="行业类型：">
          <!-- <el-cascader
            v-model="formInline.shopTypeParent"
            :options="typeLs"
            :show-all-levels="false"
            @change="handleChange"
          ></el-cascader> -->
          <el-select v-model="formInline.shopTypeParent" placeholder="请选择">
            <el-option
              v-for="item in typeLs"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户端展示类型：">
          <el-select v-model="formInline.status" placeholder="请选择">
            <el-option
              v-for="item in openLs"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="最后修改时间：">
          <el-date-picker
            v-model="date"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <div class="listBox_head">
        <el-button type="primary" @click="getNew">新增</el-button>
        <div class="btnBox">
          <el-upload
            class="upload-demo"
            :action="fileaction"
            :headers="headers"
            :data="fileData"
            :limit="1"
            :on-success="handleFileChange">
            
            <!-- :file-list="fileList" -->
            <el-button type="primary">批量导入</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
        </div>
      </div>
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
        <template v-slot:switch="{ scope }">
          <el-switch
            v-model="scope.row.status"
            @change="setStatus(scope.row)"
            active-value="1"
            inactive-value="2"
          ></el-switch>
        </template>
        <template v-slot:operate="{ scope }">
          <el-button @click="lookDetail(scope.row.shopId)" size="small"
            >详情</el-button
          >
          <el-button type="danger" @click="setDelete(scope.row)" size="small"
            >删除</el-button
          >
        </template>
      </ex-table>
    </div>
  </div>
</template>
<script>
// components
import {
  getList,
  getDelete,
  shopTypeTree,
  changeStatus,
} from "@/api/clientManagement";
import handlePageMixin from "@/mixins/handlePageMixin";
import ExportExcelButton from "@/components/ExportExcelButton/index";
export default {
  //   name: "",
  components: {
    ExportExcelButton,
  },
  mixins: [handlePageMixin],
  data() {
    return {
      fileaction: process.env.VUE_APP_BASE_API + "/merchant/shop/spurious/v1/import",
      headers: {},//设置上传文件请求头
      fileData: {},
      changeIndex: 0,
      loading: false,
      formInline: {
        shopName: "",
        shopTypeParent: "",
        status: "",
      },
      openLs: [
        { id: 1, label: "展示" },
        { id: 2, label: "不展示" },
      ],
      typeLs: [],
      date: [],
      type: "",
      tableData: [],
      tableColumn: [
        { prop: "shopId", label: "蜜链盟商户编号" },
        { prop: "shopName", label: "店铺名称" },
        { prop: "shopTypeParentName", label: "行业类型" },
        { prop: "regionName", label: "所属区域" },
        { prop: "updateTime", label: "最后修改时间" },
        {
          prop: "用户端展示",
          slot: true,
          slotName: "switch",
          label: "用户端展示",
        },
        {
          label: "操作",
          slot: true,
          slotName: "operate",
          width: "180",
          fixed: "right",
        },
      ],
    };
  },
  created() {
    this.getTypels();
    this.getList();
  },
  computed: {},
  methods: {
    //导入文件
    handleFileChange(res, file) {
      console.log('文件',res)
      if(res.code == 200){
       this.getList();
      }else{
        this.$message.error(res.message);
      }
    },
    getTypels() {
      //shopTypeTree
      this.loading = true;
      shopTypeTree()
        .then((res) => {
          let ls = [];
          console.log("res.result+++", res.result);
          ls = this.getTreeData(res.result);
          // console.log(this.typeLs)
          let ls1 = ls.map((item) => {
            item.value = item.id;
            item.children.map((items) => {
              items.value = items.id;
            });
            return item;
          });
          console.log("ls1+++", ls1);
          this.typeLs = ls1;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleChange(value) {
      let _this = this;
      console.log("value+++++++++++++", value[1]);
      _this.formInline.shopTypeParent = value[1];
    },
    getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          // data[i].children=undefined;
          delete data[i].children;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    getNew() {
      //新增
      this.$router.push({
        path: "/clientManagement/newlyBuild",
        query: { pathType: 'businessInput' },
      });
    },
    setStatus(item) {
      //changeStatus 改变状态
      console.log(item);
      var params = {
        status: item.status,
        shopId: item.shopId,
      };
      changeStatus(params).then((res) => {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1500,
        });
        setTimeout(() => {
          this.getList();
        }, 1000);
      });
    },
    onSubmit() {
      //查询
      console.log(this.formInline);
      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    reset() {
      this.formInline = {};
      this.date = [];
      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    getList() {
      const params = {
        ...this.pageOptions,
        ...this.formInline,
        startTime: this.date[0],
        endTime: this.date[1],
      };
      this.loading = true;
      getList(params)
        .then((res) => {
          const { total, records } = res.result;
          records.forEach((item) => {
            if (item.province != "") {
              item.regionName = item.province + item.city + item.area;
            } else {
              item.regionName = "-";
            }
          });
          this.$refs.table.pageOptions.total = total;
          this.tableData = records;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    setDelete(row) {
      this.$confirm("你确定要删除" + row.shopName + "的小店吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          getDelete(row.shopId)
            .then((res) => {
              const {} = res.result;
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
              });
              setTimeout(() => {
                this.getList();
              }, 1000);
            })
            .finally(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },
    lookDetail(id) {
      this.$router.push({
        path: "/clientManagement/shopDetail",
        query: { id: id },
      });
    },
  },
};
</script>
<style lang="scss">
.el-card-title {
  font-size: 20px;
}
</style>
<style lang="scss" scoped>
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px 0;
}
.el-form--inline .el-form-item {
  margin-right: 40px;
}
.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
}
.table_list {
  display: flex;
  align-items: center;
  // border: 1px solid #DCDFE6;
  border-radius: 7px;
  width: 220px;
  margin-bottom: 10px;
}
.tableBox {
  width: calc(100% / 3);
  height: 36px;
  text-align: center;
  line-height: 36px;
  color: #303133;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-right: 0;
}
.tableBox:first-child {
  border-radius: 7px 0px 0px 7px;
}
.tableBox:last-child {
  border-right: 1px solid #dcdfe6;
  border-radius: 0px 7px 7px 0px;
}
.spchoosetext {
  background-color: #fff4e6;
  color: #ff9300;
  // border: 1px solid #ff9300;
}
.listBox_head {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
  .el-button{
    height: 35px;
  }
  .btnBox{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 20px;
  }
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.head ::v-deep.el-input-group__prepend {
  width: 110px !important;
}
</style>
